<template>
  <div class="bigbox">
    <!-- 新增按钮 -->

    <el-row type="flex" justify="end" style="padding-bottom: 15px">
      <el-button
        @click="$router.push('/questions/new')"
        size="medium"
        type="success"
        ><i class="el-icon-edit" style="margin-right: 5px"></i
        >新增试题</el-button
      >
    </el-row>
    <!-- 表单 -->
    <el-form ref="form" :model="form">
      <el-row :gutter="20">
        <!-- 学科 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="学科" label-width="80px">
            <el-select
              v-model="form.subjectID"
              style="width: 100%"
              @change="subjectChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 二级目录 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10"
          ><el-form-item label="二级目录" label-width="80px">
            <el-select v-model="form.catalogID"   style="width: 100%">
              <el-option
                v-for="item in simplelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 标签 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="标签" label-width="80px">
            <el-select v-model="form.tags"   style="width: 100%">
              <el-option
                v-for="item in optionslist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 关键字 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="关键字" label-width="80px">
            <!-- 选择器 -->
            <el-input v-model="form.keyword"   style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
        <!-- 试题类型 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="试题类型" label-width="80px">
            <el-select v-model="form.questionType"  style="width: 100%">
              <el-option
                v-for="item in questionTypelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 难度 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="难度" label-width="80px">
            <el-select v-model="form.difficulty"   style="width: 100%">
              <el-option
                v-for="item in difficultylist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 方向 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="方向" label-width="80px">
            <el-select v-model="form.direction"   style="width: 100%">
              <el-option
                v-for="item in directionlist"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 录入人 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="录入人" label-width="80px">
            <!-- 选择器 -->
            <el-select v-model="form.creatorID"   style="width: 100%">
              <el-option
                v-for="item in peoplelist"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 题目备注 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="题目备注" label-width="80px">
            <!-- 选择器 -->
            <el-input v-model="form.remarks"   style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
        <!-- 企业简称 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="企业简称" label-width="80px">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <!-- 城市(级联选择器) -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item label="城市" label-width="80px">
            <el-row type="flex">
              <el-select
                v-model="form.province"
              style="width: 60%; margin-right: 10px"
                @change="cityChange"
              >
                <el-option
                  v-for="item in citys"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select v-model="form.city"  style="width: 60%;">
                <el-option
                  v-for="item in countrylist"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-row>
          </el-form-item>
        </el-col>
        <!-- 按钮 -->
        <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button @click="del">清除</el-button>
              <el-button type="primary" @click="source">搜索</el-button>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 学科
import { simple } from '@/api/hmmm/subjects'
// 目录接口
import { simple as listsimple } from '@/api/hmmm/directorys'
// 标签接口
import { simple as listoptions } from '@/api/hmmm/tags'
// 固定数据接口
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
// 城市接口
import { provinces, citys } from '@/api/hmmm/citys'
import { list } from '@/api/hmmm/questions'
export default {
  name: 'Header',

  data () {
    return {
      form: {
        // 学科被绑定值
        subjectID: null,
        // 二级目录绑定值
        catalogID: null,
        // 标签绑定值
        tags: null,
        // 关键字绑定值
        keyword: null,
        // 类型值
        questionType: null,
        // 难度绑定值
        difficulty: null,
        // 方向绑定值
        direction: null,
        // 录入人绑定值
        creatorID: null,
        // 题目备注绑定值
        remarks: null,
        // 企业简称绑定值
        shortName: null,

        // 城市绑定值
        province: null,
        city: null
      },
      // --------------------------------
      // 学科列表数据
      options: [],
      // 二级列表
      simplelist: [],
      // 标签列表
      optionslist: [],
      // 难度列表
      difficultylist: [],
      // 类型列表
      questionTypelist: [],
      // 方向列表
      directionlist: [],
      // 录入人
      peoplelist: ['超级管理员'],
      // 城市列表
      citys: [],
      // 县级列表
      countrylist: []
    }
  },
  created () {
    // 调取学科列表
    this.simple()
    //  难度列表
    this.difficultylist = difficulty
    //  类型列表
    this.questionTypelist = questionType
    //  方向
    this.directionlist = direction
    //  城市
    this.cityslist()
  },

  methods: {
    // 学科列表
    async simple () {
      const { data } = await simple()
      // console.log(data);
      this.options = data
    },
    //  学科改变事件
    subjectChange (id) {
      // console.log(id);
      this.listsimple(id)
      this.listoptions(id)
    },
    //  二级目录
    async listsimple (id) {
      // console.log(id);
      this.form.catalogID = ''
      const { data } = await listsimple({
        subjectID: id
      })
      // console.log(data);
      this.simplelist = data
    },
    //  标签列表
    async listoptions (id) {
      this.form.tags = ''
      const { data } = await listoptions({ id })
      this.optionslist = data
    },
    //  获取城市列表
    cityslist () {
      this.citys = provinces()
      this.cityChange()
    },
    // 下级县城变化
    cityChange (val) {
      // console.log(this.city1);
      this.country = ''
      // console.log(val);
      this.countrylist = citys(val)
      // console.log(this.countrylist);
    },
    //  清空数据按钮
    del () {
      this.form = {}
    },
    // 搜索按钮
    async source () {
      // const{data}=await list(this.form)
      // console.log(data);
      // this.$parent.list=data.items
      // console.log(this.$parent.current)
      this.$parent.current = 1

      this.$nextTick(() => {
        this.$parent.getList(this.form)
        this.$parent.pageform = this.form
      })
      // console.log(this.$parent.list);}
    }
  }
}
</script>

<style lang="less" scoped>
// /*字体颜色*/

// @fontColor: #606266;
// .addbtn {
//   float: right;
//   margin-bottom: 15px;
// }
// .container {
//   .top {
//     margin-top: 20px;
//   }
//   // 每一个容器
//   .box {
//     display: flex;
//     justify-content: flex-start;
//     padding-bottom: 15px;
//     //  height: 40px;

//     h4 {
//       width: 80px;
//       text-align: right;
//       font-size: 14px;
//       margin: 10px 15px 0 0;

//       color: @fontColor;
//     }
//     .city {
//       width: 212px;
//       display: flex;
//       justify-content: space-around;
//       :nth-child(1) {
//         margin-right: 5px;
//       }
//     }
//   }
// }
</style>
